<template>
  <div class="shoppingCart-container">
    <Header />

    <div class="topBar">
      <div class="topBar-left">
        <i class="el-icon-back"></i>
        返回
        <el-divider direction="vertical"></el-divider>
        <p>购物车</p>
      </div>
      <div>
        <el-popconfirm title="删除不可恢复,确定吗?" @confirm="operatGoods()">
          <p slot="reference">
            <el-button type="danger" size="mini" :disabled="deleteState">
              <i class="el-icon-delete"></i>批量删除
              <span v-if="this.currentGoodsIndex.length > 0">
                ({{
                currentGoodsIndex.length
                }})
              </span>
            </el-button>
          </p>
        </el-popconfirm>
      </div>
    </div>

    <div v-if="Object.keys(shoppingCart).length == 0 ? true : false" class="el-skeleton-container">
      <el-empty description="购物车里什么也没有，快去购物吧"></el-empty>
    </div>

    <div v-else class="shoppingCart">
      <el-table :data="shoppingCart" stripe @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="商品" width="200">
          <template slot-scope="scope">
            <img width="100px" :src="scope.row.commodity.picture" style="border-radius:10px;">
          </template>
        </el-table-column>
        <el-table-column prop="commodity.name" width="180" label="名称"></el-table-column>
        <el-table-column prop="commodity.price" label="价格/元" width="80"></el-table-column>
        <el-table-column label="规格" width="250">
          <template slot-scope="scope">
            <p>
              {{
              scope.row.commoditycolor +
              "/" +
              scope.row.commodguige +
              "/" +
              scope.row.commcolor
              }}
            </p>
          </template>
        </el-table-column>
        <el-table-column label="数量" width="150">
          <template slot-scope="scope">
            <el-input-number
              @change="(val)=>{handleChange(val, scope.row.commodityid);}"
              size="small"
              v-model="scope.row.commoditysum"
              :min="1"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="小计" width="100">
          <template slot-scope="scope">
            <el-link type="warning">
              {{
              Math.floor(scope.row.commoditysum * scope.row.price * 100) / 100
              }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="deleteGoods(scope.row.commodityid)" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="sumTabBar">
        <div class="tabBar-left">
          <el-link type="warning">继续购物</el-link>
          <el-divider direction="vertical"></el-divider>
          <p>
            共 {{ this.goodsNum }} 件商品，已选择
            {{ currentGoodsIndex.length }} 件
          </p>
        </div>

        <div class="tabBar-right">
          <p>
            共计:
            <span>{{ sumGoodsPrice() }}元</span>
          </p>
          <button @click="countPrice()">结算</button>
        </div>
      </div>
    </div>
    <Bottom></Bottom>
  </div>
</template>

<script>
//全局header
import Header from "@/components/modules/header.vue";
//api
import {
  GetShoppingCatbyUseid,
  updateSPSum,
  DeleteSP,
  updateStatus
} from "@/utils/api/api.js";
//Bottom组件
import Bottom from "@/components/modules/bottom.vue";
export default {
  components: {
    Header,
    Bottom
  },
  data() {
    return {
      userId: "",
      //购物车数据
      shoppingCart: [],
      //骨架屏加载状态
      loading: true,
      //批量删除按钮状态
      deleteState: true,
      //商品书数量
      goodsNum: 0,
      //当前选中的商品id
      currentGoodsIndex: [],
      //当前选中的商品信息
      currentGoods: []
    };
  },
  methods: {
    //获取购物车
    getShoppingCat() {
      GetShoppingCatbyUseid(this.userId).then(resp => {
        this.loading = false;
        this.shoppingCart = resp.msg;
        this.goodsNum = this.shoppingCart.length;
        console.log(this.shoppingCart);
      });
    },
    //改变商品数量
    handleChange(value, index) {
      updateSPSum(value, index).then(resp => {});
    },
    //根据id删除购物车指定商品
    deleteGoods(idx) {
      DeleteSP(idx, this.userId).then(resp => {
        if (resp.code == 200) {
          this.$notify.success("删除成功");
          this.getShoppingCat();
        } else {
          this.$notify.error("删除失败");
        }
      });
    },
    //计算购物总价格
    sumGoodsPrice() {
      let price = 0;
      // return this.shoppingCart[0].commoditysum
      this.currentGoods.forEach(item => {
        price += item.commodity.price * item.commoditysum;
      });
      return Math.floor(price * 100) / 100;
    },
    //批量删除商品
    operatGoods() {
      this.currentGoodsIndex.forEach(item => {
        this.deleteGoods(item);
      });
      this.$message({
        message: "删除成功",
        type: "success"
      });
       this.currentGoodsIndex=[]
    },
    //当前勾选的商品
    handleSelectionChange(val) {
      const num = val.map(item => {
        return item.commodityid;
      });
      console.log(num);
      //当前选中的商品信息
      this.currentGoods = val;
      //当前选中的商品id
      this.currentGoodsIndex = num;
      //控制批量删除按钮状态
      if (this.currentGoodsIndex.length > 0) {
        this.deleteState = false;
      } else {
        this.deleteState = true;
      }
    },
    //结算修改选中商品未待付款
    countPrice() {
      if (this.currentGoodsIndex.length == 0) {
        this.$message({
          type: "info",
          message: "至少选择一件商品"
        });
      } else {
        this.currentGoodsIndex.forEach(item => {
          updateStatus(this.uid, item, 1).then(resp => {
            console.log("修改状态成功");
          });
        });
        this.$router.push({
          path: "/counter",
          query: {
            idx: this.currentGoodsIndex
          }
        });
      }
    }
  },
  created() {
    const user = JSON.parse(localStorage.getItem("user"));
    this.userId = user.uid;
    this.getShoppingCat();
  }
};
</script>

<style lang="scss" scoped>
@import "./shoppingcart.scss";
</style>
